<template>
  <div class="app-container">
    <withdraw-filter :tage="1" @on-filter="submitFilterForm"/>
    <div style="padding: 20px 0">
      <el-button-group>
        <el-button size="mini" style="width: 140px" type="primary" v-if="roleCheck('batch-recover')" @click="setRecover">{{this.$t('language.finance.withdrawal.batchRecycle')}}</el-button>
      </el-button-group>
      <el-button-group>
        <el-button size="mini" style="width: 140px" type="primary" v-if="roleCheck('batch-seperate')" @click="setSingle">{{this.$t('language.finance.withdrawal.batchDispense')}}</el-button>
      </el-button-group>
    </div>
    <el-table @selection-change="handleSelectionChange"
              :data="tableData.list"
              v-loading="loading"
              element-loading-text="加载中..."
              class="el-table-align-center"
              >
      <el-table-column type="selection" align="center" width="55"></el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.requestTime')" width="90" prop="userType" align="center">
        <template slot-scope="{row}">
          <div>{{row.createDate | toTime}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.billNo')" prop="orderId" align="center">
        <template slot-scope="{row}">
          <div :class="{'active': row.splitStatus == 1}">{{row.orderId}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.splitRelatedTxn')" prop="batchNumber" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.userType')" prop="username" align="center">
        <template slot-scope="{row}">
          <span>{{row.userType===0?'会员':row.userType===1?'代理':'--'}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.accountName')" prop="username" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.level')" prop="userLevel" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.paymentType')" prop="withdrawType" align="center">
        <template slot-scope="{row}">
<!--          {{row.withdrawType | toConverter('WAY_DISPEN_TYPE')}}-->
          {{ toSwitchData('language.finance.consts.PAYMENT_TYPE', row.withdrawType) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.amount')" width="100" prop="amount" align="center">
        <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.withdrawalBankName')" prop="bankName" align="center"></el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.withdrawalStatus')" width="100" prop="status" align="center">
        <template slot-scope="{row}">
          {{ toSwitchData('language.finance.consts.WITHDRAW_STATUS_THREE', row.status) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.remarks')" prop="remark" align="center"></el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.dispenseTo')" prop="seperator" align="center"></el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.undispensedType')" prop="seperateReason" align="center">
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.dispenseTime')" prop="seperateDate" align="center">
        <template slot-scope="{row}">
          <div>{{row.seperateDate | toTime}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('language.finance.withdrawal.operation')" fixed="right" align="center" width="100">
        <template slot-scope="{row}">
          <el-button type="text" v-if="(row.seperator === '' || row.seperator === null  )" @click="openDialog({props: {idsArr:[row.orderId],usernameList:[row.username]},dialogName: staticDialogName2})">{{$t('language.finance.withdrawal.dispense')}}</el-button>
          <el-button type="text" v-if="((row.status === 0 || row.status === 7)&& row.seperator !== '' && row.seperator !== null )" @click="openDialog({props: {idsArr:[row.orderId]},dialogName: staticDialogName1})">{{$t('language.finance.withdrawal.recycle')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
    <batch-recover-dialog
      v-if="dialogName === staticDialogName1"
      :row-data="dialogProps"
      v-model="dialogVisible"
      @submit="submitFinished"/>
    <batch-seperate-dialog
      v-if="dialogName === staticDialogName2"
      :row-data="dialogProps"
      v-model="dialogVisible"
      @submit="submitFinished"/>
  </div>
</template>


<script>
import {
  withdrawSeperateList, batchRecoverCheck, conditionReview, merchantReview,
} from '@/services/api/withdraw';
import { getUserLevelList } from '@/services/api/userLevel';
import { grid, dialog, switchData } from '@/build';
import BatchRecoverDialog from '@/views/finance/withdraw/batchRecoverDialog';
import BatchSeperateDialog from '@/views/finance/withdraw/batchSeperateDialog';
import WithdrawFilter from '@/views/finance/withdraw/withdrawFilter';

export default {
  name: 'withdraw-seperate',
  components: { BatchRecoverDialog, BatchSeperateDialog, WithdrawFilter },
  mixins: [grid, dialog, switchData],
  data() {
    return {
      activeClass: 'active',
      staticDialogName1: 'batch-user-dialog',
      staticDialogName2: 'batch-seperate-dialog',
      ids: [],
      userLevel: [],
      filters: {
        size: 20,
        page: 1,
        withdrawType: -1,
        status: [7,0,11],
        splitType: undefined,
        startTime: moment().format('YYYY-MM-DD 00:00:00'),
        endTime: moment().format('YYYY-MM-DD 23:59:59'),
        userLevel: [],
        dateType: 1,
        searchType: 1,
      },
      recoverList: [],
      usernameList: [],
      dialogVisible: false,
      tableData: {
        list: [],
      },
    };
  },
  computed: {
    idsArr() {
      return this.ids.map(item => item.username);
    },
    _idsArr() {
      return this.ids.map(item => item.orderId);
    },
  },
  mounted() {
    this.bindGet(withdrawSeperateList, 'tableData', {
      action: 'getGrid',
      beforeSend: (data) => {
        if (data.splitType) {
          data.splitType = 1;
        } else {
          data.splitType = undefined;
        }
        if (data.userLevel.length > 0) {
          data.userLevel = data.userLevel.join(',');
        }
        if (data.status.length > 0) {
          data.status = data.status.join(',');
        }
        return data;
      },
      sendingData: 'filters',
    });
    this.bindGet(getUserLevelList, 'userLevel', {
      action: 'getGrid1',
    });
    // this.bindGet(batchRecoverCheck, 'recoverList',{
    //   action: 'getGrid2',
    //   beforeSend:()=>{
    //     return {orderIds : this._idsArr.join(',')}
    //   }
    // });
    this.getAll();

    // this.doGet({action: 'getGrid'})
    // this.doGet({action: 'getGrid1'})
    // this.doGet({action: 'getGrid2'})
    // this.getAll()
  },
  methods: {
    selfResetForm(formName) {
      this.resetForm(formName);
      this.getAll();
    },
    handleSelectionChange(val) {
      this.ids = val;
    },
    setRecover() {
      if (this.idsArr.length <= 0) {
        this.$message({
          type: 'warning',
          message: '请勾选数据',
        });
        return;
      }
      this.openDialog({ props: { idsArr: this._idsArr }, dialogName: this.staticDialogName1 });
    },
    setSingle() {
      if (this.idsArr.length <= 0) {
        this.$message({
          type: 'warning',
          message: '请勾选数据',
        });
        return;
      }
      this.openDialog({ props: { idsArr: this._idsArr, usernameList: this.idsArr }, dialogName: this.staticDialogName2 });
    },
  },
};
</script>

<style lang='scss' scoped>
  .active{
    color:#F4A460;;
  }
  .with-pre-select {
    .el-input-group__prepend {
      .el-select {
        width: 100px;
      }
    }
  }
  .active{
    color:#F4A460;;
  }
   /deep/ thead .cell{word-break:break-word;}
  /deep/ .el-table{
    .el-checkbox__inner{
      width: 20px;
      height: 20px;

      &:after{
        width: 5px;
        height: 9px;
        top:2px;
        left: 6px;
      }
      &:before{
        top: 9px;
      }
    }
  }
</style>
